<template>
  <uni-nav-bar left-icon="left" statusBar title="提现记录" :border="false" fixed @clickLeft="clickLeft">
    <view style="flex: 1;font-size: 16px;font-weight: bold;text-align: center;line-height: 44px;color:#000">提现记录</view>
    <template #left>
      <uni-icons type="back" size="26"></uni-icons>
    </template>
  </uni-nav-bar>
  <view class="record-list">
    <view v-for="record in recordList" :key="record.id" class="it-b">
      <extract-record :option="record"></extract-record>
    </view>
    <view class="no-data" v-if="noData">
      <img src="https://img.qumoyugo.com/webimgbg/pet-records-no-data-act.png" class="img">
      <view>暂无提现记录哟～</view>
    </view>
  </view>
</template>

<script setup>
import ExtractRecord from '@/components/list/extractRecord'
import { ref, onMounted, getCurrentInstance } from 'vue'
import { onReachBottom, onPullDownRefresh, onLoad } from '@dcloudio/uni-app'
// #ifdef H5
import jsBridge from '@/utils/jsBridge'
// #endif
const { $https } = getCurrentInstance().appContext.config.globalProperties
const recordList = ref([])
const pageOptions = ref({})
const optionPage = ref({
  page: 0,
  more: true
})
const noData = ref(false)
onMounted(() => {
  getList()
  // #ifdef H5
  document.getElementsByTagName('uni-page-wrapper')[0].style.background = '#f9f9f9'
  // #endif
})
onReachBottom(() => {
  if (optionPage.value.more) {
    getList()
  }
})
onPullDownRefresh(() => {
  getList(true)
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 800)
})
onLoad((options) => {
  pageOptions.value = options
})
const clickLeft = () => {
  if (pageOptions.value.orgin) {
    jsBridge.webCallHandler('navigateBack')
  } else {
    uni.navigateBack()
  }
}
const getList = (flag) => {
  if (flag) {
    optionPage.value = {
      page: 0,
      more: true
    }
    recordList.value = []
  }
  $https({
    url: '/biscuit/draw',
    type: '',
    method: 'get',
    data: {
      page: optionPage.value.page + 1,
      size: 8
    }
  }).then(res => {
    if (res.code === 0) {
      recordList.value.push(...res.data.items)
      optionPage.value = {
        page: res.data.pagination.page + 1,
        more: res.data.pagination.more
      }
      noData.value = res.data.pagination.total_record === 0
    }
  })
}
</script>

<style scoped lang="scss">
.record-list{
  // background: #F9F9F9;
  padding: 0 30rpx 24rpx 30rpx;
  // min-height: calc(100vh - 44px - 20px);
  .it-b{
    background: #FFFFFF;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    padding: 30rpx 24rpx;
  }
  .no-data{
    text-align: center;
    color: #999999;
    padding-top: 100px;
    .img{
      width: 386rpx;
      height: 326rpx;
      margin-bottom: 20rpx;
    }
  }
}
</style>
